import React from 'react';
import ReactDOM from 'react-dom';
// class Count extends React.Component {
//   shouldComponentUpdate(nextProps, nextState) {
//     // 这是一个性能优化的钩子函数
//     if (nextProps.count === this.props.count) return false
//     return true
//   }
//   render() {
//     console.log('child render')
//     return <h1>{this.props.count}</h1>
//   }
// }
console.log(React.PureComponent)
class Count extends React.PureComponent {
  // React.PureComponent 内置  shouldComponentUpdate   但是自会比较最外层的参数
  render() {
    console.log('child render')
    return <h1>{this.props.count}</h1>
  }
  componentWillUnmount() {
    //  组件将要销毁的时候 触发
    //  移除定时器或者一些DOM事件绑定
  }
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 123,
      qq: 100
    }
  }
  // static getDerivedStateFromProps(props, state) {
  //   return {
  //     ...props,
  //     ...state
  //   }
  // }
  // UNSAFE_componentWillMount() {
  //   console.log('beforeMount')
  // }
  add = () => {
    this.setState({
      count: this.state.count + 10
    })
  }
  render() {
    console.log(this.state)
    return <div className=''>
      {this.state.qq}
      <button onClick={() => { this.setState({ qq: this.state.qq + 10 }) }}>+qq</button>
      <button onClick={this.add}>+</button>
      <Count count={this.state.count} />
    </div>;
  }
}

ReactDOM.render(<App ww={666} />, document.getElementById('root'))